<template>
  <div class="xiangshu">
    <div class="header">
      <div class="w">
        <div class="logo">
          <img src="http://www.gzoaktreeinv.com/wp-content/uploads/2022/01/2e1369fd979bf11eba1ecd6d3ff8f92b.png" alt="">
        </div>
        <div class="nav" @click="hedde">
          <router-link :to="{ name: 'home' }">首页</router-link>
          <router-link :to="{ name: 'jianjie' }">公司简介</router-link>
          <router-link :to="{ name: 'tuandui' }">橡树团队</router-link>
          <router-link :to="{ name: 'dongtai' }">发展动态</router-link>
          <router-link :to="{ name: 'hezuoqiye' }">合作企业</router-link>
          <router-link :to="{ name: 'lianxi' }">联系方式</router-link>
        </div>
        <div>
          <a href="#"><b>中文</b> | EN</a>
        </div>
      </div>
    </div>
  </div>
  <div class="content">
    <router-view></router-view>
  </div>

</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
  components: {

  },
  setup(){
    const hedde = ()=>{
      if(document.body.offsetWidth < 700){
        // document.querySelector(".nav") = "overflow :hidden"
        console.log(111);
      }
    }
    return {
      hedde
    }
  }
});
</script>

<style lang="scss">
.xiangshu {


  .header {
    width: 100%;
    position: fixed;
    top: 0;
    padding: 0 20px 0 30px;
    height: 100px;
    display: flex;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 100;

    div {
      display: flex;
      align-items: center;
      img {
        height: 60%;

      }

      a {
        font-size: 16px;
        padding: 0 16px;
        margin: 0 16px;
        line-height: 100px;
        height: 100px;
        box-sizing: border-box;
        &:hover {
          color: #00783D;
          border-bottom: 5px solid #00783D;
        }
      }

    }

    .nav {
      margin-left: 160px;
    }


  }
}

.content {
  height: 100%;
  width: 100%;
}

.router-link-active {
  border-bottom: 5px solid #00783D;
}
</style>
